{include file="public/header" /}
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-warning {
    background: #E6A23C;
  }
  .bg-primary {
    background: #409EFF;
  }
  .bg-danger {
    background: #F56C6C;
  }
  .bg-success {
    background: #67C23A;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    padding:10px;
    color:#fff;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .grid-num{width:100%;height:50px;line-height:50px;font-size:20px;}
</style>
</head>
<body>
<div id="box" v-cloak class="box">
	<el-row :gutter="20">
		<el-col :span="6">
			<div class="grid-content bg-danger">
				<p>文章数</p>
				<div class="grid-num">1100</div>
			</div>
		</el-col>
	  	<el-col :span="6">
	  		<div class="grid-content bg-primary">
				<p>留言数</p>
				<div class="grid-num">1100</div>
			</div>
	  	</el-col>
	  	<el-col :span="6">
	  		<div class="grid-content bg-success">
				<p>浏览数</p>
				<div class="grid-num">1100</div>
			</div>
	  	</el-col>
	  	<el-col :span="6">
	  		<div class="grid-content bg-warning">
				<p>访问数</p>
				<div class="grid-num">1100</div>
			</div>
	  	</el-col>
	</el-row>
</div>
<script>
new Vue({
	el : '#box',
	data:{
	},
	mounted:function(){},
	methods:{
	}
});
</script>
</body>
</html>